<template>
  <div class="report-container">
    <div class="report-wrapper">
      <div class="report-title">
        <div class="report-title-back" @click="closeReport">
          <i class="el-icon-arrow-left"></i>返回
        </div>
        <div class="report-title-text">舌诊报告</div>
      </div>
      <div class="report-wrapper-inner">
        <div class="report-body">
          <div class="report-base-info">
            <div class="user-base-info">
              <div class="base-info-left">
                <div class="base-info-left-title">智能舌诊报告单</div>
                <div class="report-date">{{ baseInfo.createTime }}</div>
                <div class="user-info">
                  <div class="user-info-single">
                    <img
                      class="user-info-icon"
                      src="../../assets/image/report-user.png" />
                    <span class="user-info-text">{{
                      baseInfo.answeUserName
                    }}</span>
                  </div>
                  <div class="user-info-single">
                    <img
                      class="user-info-icon"
                      src="../../assets/image/report-gender.png" />
                    <span class="user-info-text">{{ baseInfo.sex }}</span>
                  </div>
                  <div class="user-info-single">
                    <img
                      class="user-info-icon"
                      src="../../assets/image/report-age.png" />
                    <span class="user-info-text">{{ baseInfo.age }}</span>
                  </div>
                </div>
              </div>
              <div class="base-info-right">
                <img
                  class="base-info-img"
                  src="http://chunfengai.top:29001/download/report-banner-img.png" />
              </div>
            </div>
            <div class="body-type-info">
              <div class="body-type-left">
                <img
                  class="body-type-left-img"
                  src="http://chunfengai.top:29001/download/report-banner-img2.png" />
              </div>
              <div class="body-type-right">
                <div class="body-type-title">体质？</div>
                <div class="body-type-text">
                  说明：仅仅依靠舌象来判别体质并不完全准确，且拍摄时受光线、食物等多方面影响。萌医大模型可根据您的舌象特点及主动问询深度解析您的体质，点击“咨询体质”开启深度体质解析。
                </div>
                <div class="body-type-ask" @click="goAskBodyType">
                  咨询体质<i class="el-icon-arrow-right"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="report-result-divide">
            <div class="report-result-text">诊断结果</div>
          </div>
          <div class="report-result-item">
            <div class="report-result-item-title">
              <img
                class="item-icon"
                src="../../assets/image/report-overall.png" />
              <div class="item-title-text">检测表</div>
            </div>
            <table class="type-table" cellspacing="0">
              <tr class="table-tr">
                <td class="table-head">辨识维度</td>
                <td v-for="(item, index) in tableData" :key="index">
                  {{ item.dimension }}
                </td>
              </tr>
              <tr class="table-tr">
                <td class="table-head">正常值</td>
                <td v-for="(item, index) in tableData" :key="index">
                  {{ item.normal }}
                </td>
              </tr>
              <tr class="table-tr">
                <td class="table-head">检测结果</td>
                <td
                  v-for="(item, index) in tableData"
                  :key="index"
                  :style="`color:${item.result == item.normal ? '' : 'red'}`">
                  {{ item.result }}
                </td>
              </tr>
            </table>
          </div>
          <div class="report-result-item">
            <div class="report-result-item-title">
              <img
                class="item-icon"
                src="../../assets/image/report-shape.png" />
              <div class="item-title-text">舌形</div>
            </div>
            <div class="result-shape">
              <div class="shape-tag-wrapper">
                <div
                  :class="
                    index == showShapeIndex
                      ? 'shape-tag'
                      : 'shape-tag disactive'
                  "
                  v-for="(item, index) in reportInfo.tongueShapeList"
                  :key="index"
                  @click="handelShapeTag(index)">
                  {{ item.key }}
                </div>
              </div>
              <div class="shape-description desc-line">
                {{ reportInfo.tongueShapeList[showShapeIndex].desc }}
              </div>
              <div class="shape-img-container">
                <div
                  class="shape-img-single"
                  v-for="(image, imgIndex) in reportInfo.tongueShapeList[
                    showShapeIndex
                  ].pic"
                  :key="imgIndex">
                  <img
                    class="shape-img-single-img"
                    :src="'data:image/png;base64,' + image.file"
                    @click="showImageViewer(image.file)" />
                  <div class="shape-img-single-name">{{ image.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="report-result-item">
            <div class="report-result-item-title">
              <img
                class="item-icon"
                src="../../assets/image/report-circle.png" />
              <div class="item-title-text">舌苔</div>
            </div>
            <div class="result-moss">
              <div class="moss-slider">
                <div
                  class="moss-slider-single"
                  v-for="(moss, mossIndex) in mossTypes"
                  :key="mossIndex">
                  <div
                    :class="`moss-slider-single-line ${
                      reportInfo.mossColor.key == moss ? 'active' : ''
                    }`"></div>
                  <div class="moss-slider-single-text">
                    {{ moss }}
                  </div>
                </div>
              </div>
              <div class="moss-desc desc-line">
                {{ reportInfo.mossColor.desc }}
              </div>
            </div>
          </div>
          <div class="report-result-item">
            <div class="report-result-item-title">
              <img
                class="item-icon"
                src="../../assets/image/report-shape.png" />
              <div class="item-title-text">舌色</div>
            </div>
            <div class="result-color">
              <div class="color-list">
                <div
                  :class="`color-list-single${
                    reportInfo.tongueColor.key == color + '舌' ? ' active' : ''
                  }`"
                  v-for="(color, colorIndex) in tongueColors"
                  :key="colorIndex">
                  {{ color }}
                </div>
              </div>
              <div class="desc desc-line">
                {{ reportInfo.tongueColor.desc }}
              </div>
            </div>
          </div>
          <div class="report-result-item">
            <div class="report-result-item-title">
              <img
                class="item-icon"
                src="../../assets/image/report-slime.png" />
              <div class="item-title-text">津液</div>
            </div>
            <div class="result-slime desc-line">
              {{ reportInfo.bodyFluid.desc }}
            </div>
          </div>
          <div class="report-result-item">
            <div class="report-result-item-title">
              <img class="item-icon" src="../../assets/image/report-top.png" />
              <div class="item-title-text">舌下</div>
            </div>
            <div class="result-slime desc-line">
              {{ reportInfo.sublingualCollaterals.desc }}
            </div>
          </div>
          <div class="report-footer">
            <el-button
              class="report-footer-button"
              type="primary"
              plain
              @click="closeReport"
              >返回问诊</el-button
            >
            <el-button
              class="report-footer-button"
              type="primary"
              @click="goAskBodyType"
              >咨询体质</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <el-image-viewer
      v-if="imagePreviewUrl"
      :url-list="[imagePreviewUrl]"
      z-index="3000"
      :on-close="closeImageViewer" />
  </div>
</template>

<script>
  // import { Loading } from 'element-ui'
  import elImageViewer from 'element-ui/packages/image/src/image-viewer.vue'
  import request from '../../utils/request'
  export default {
    name: 'ReportContainer',
    props: {
      processId: String,
    },
    components: { elImageViewer },
    data() {
      return {
        loading: undefined,
        fullscreenLoading: true,
        baseInfo: {
          createTime: '',
          answeUserName: '',
          bigmodelRes: '',
          sex: '',
          age: '',
        },
        reportInfo: '',
        tableData: [],
        showShapeIndex: 0,
        mossTypes: ['白苔', '淡黄苔', '黄苔', '灰黑苔'],
        tongueColors: ['淡白', '淡紫', '淡红', '红', '暗红', '青紫'],
        imagePreviewUrl: '',
      }
    },
    computed: {},
    watch: {},
    created() {
      this.requireReport()
    },
    mounted() {},
    methods: {
      showImageViewer(src) {
        this.imagePreviewUrl = 'data:image/png;base64,' + src
      },
      closeImageViewer() {
        this.imagePreviewUrl = ''
      },
      closeReport() {
        this.$emit('closeReport')
      },
      handelShapeTag(i) {
        this.showShapeIndex = i
      },
      goAskBodyType() {
        this.$emit('reportBodyType')
      },
      requireReport() {
        this.loading = this.$loading({})
        this.req({
          method: 'POST',
          url: '/applet/dialog/get/report',
          data: { processId: this.processId },
        }).then((res) => {
          this.loading.close()
          Object.keys(this.baseInfo).forEach((k) => {
            this.baseInfo[k] = res.data.data[k]
          })
          this.tableData = res.data.data.detectList
          this.reportInfo = JSON.parse(res.data.data.report)
          console.log('this.reportInfo:>> ', this.reportInfo)
          // this.tableData.unshift({dimension:'辨识维度',result:'检测结果',normal:'正常值'})
        })
      },
      req(params) {
        return new Promise((resolve, reject) => {
          request(params)
            .then((res) => {
              if (res.data.code == 200) {
                resolve(res)
              } else {
                // this.goLogin()
                console.log('res :>> ', res)
              }
            })
            .catch((err) => {
              console.log('err :>> ', params, err)
              if (err == 401) {
                this.loading.close()
                this.$emit('goLogin')
              }
            })
        })
      },
    },
  }
</script>
<style scoped lang="less">
  * {
    box-sizing: border-box;
  }
  .report-container {
    width: 100%;
    position: absolute;
    // margin: 24px;
    border-radius: 8px 8px 8px 8px;
    // box-shadow: 0 0 20px #dcdcdc;
  }
  .report-wrapper {
    width: 100%;
    min-width: 1100px;
    padding: 24px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .report-wrapper-inner {
    // width: 100%;
    //
    overflow: auto;
    // margin: auto;
    display: flex;
    // justify-content: center;
  }
  .report-title {
    display: flex;
    width: 100%;
    .report-title-back {
      color: #65b0b4;
      padding-right: 10px;
      border-right: 1px solid #dcdcdc;
      cursor: pointer;
    }
    .report-title-text {
      padding-left: 10px;
    }
  }
  .report-body {
    margin-top: 24px;
    min-width: 1064px;
    .report-base-info {
      display: flex;
      justify-content: space-between;
      .user-base-info {
        width: 403px;
        background: linear-gradient(131deg, #f4f8f9 0%, #e8f4fa 100%);
        border-radius: 8px 8px 8px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 28px;
        .base-info-left {
          // padding: 28px;
          .base-info-left-title {
            font-size: 24px;
            font-weight: bold;
            color: #65b0b4;
            line-height: 28px;
          }
          .report-date {
            margin-top: 8px;
            width: 101px;
            height: 28px;
            background: rgba(101, 176, 180, 0.15);
            border-radius: 16px 16px 16px 16px;
            color: #65b0b4;
            font-size: 14px;
            text-align: center;
            line-height: 28px;
          }
          .user-info {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            margin-top: 8px;
            .user-info-single {
              display: flex;
              align-items: center;
              margin-right: 10px;
              .user-info-icon {
                height: 18px;
                width: 18px;
                margin-right: 4px;
              }
              .user-info-text {
                text-wrap: nowrap;
                font-size: 14px;
                color: #1a1a1a;
              }
            }
          }
        }
        .base-info-right {
          .base-info-img {
            width: 143px;
          }
        }
      }
      .body-type-info {
        width: 645px;
        background: #54b1c4;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        align-items: center;
        padding: 12px 33px;
        .body-type-left {
          .body-type-left-img {
            width: 112px;
          }
        }
        .body-type-right {
          display: flex;
          flex-direction: column;
          .body-type-title {
            font-size: 18px;
            font-weight: bold;
            color: #ffffff;
            line-height: 21px;
          }
          .body-type-text {
            font-size: 12px;
            font-weight: 400;
            color: #ffffff;
            // line-height: 14px;
            margin-top: 4px;
          }
          .body-type-ask {
            margin-top: 8px;
            width: 97px;
            height: 32px;
            background: #ffffff;
            border-radius: 4px 4px 4px 4px;
            color: #54b1c4;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .report-result-divide {
    margin-top: 24px;
    border-bottom: 1px solid #ececec;
    .report-result-text {
      width: fit-content;
      color: #65b0b4;
      padding-bottom: 6px;
      border-bottom: 3px solid #65b0b4;
    }
  }
  .report-result-item {
    display: flex;
    flex-direction: column;
    .report-result-item-title {
      display: flex;
      align-items: center;
      margin-top: 16px;
      margin-bottom: 10px;
      .item-icon {
        height: 18px;
        width: 18px;
        margin-right: 4px;
      }
      .item-title-text {
        color: #1a1a1a;
      }
    }
    .type-table {
      border-left: 1px solid #e8eaec;
      border-top: 1px solid #e8eaec;
      td {
        border-right: 1px solid #e8eaec;
        border-bottom: 1px solid #e8eaec;
        height: 40px;
        padding: 10px 16px;
      }
      .table-head {
        background: #f8f8f8;
      }
    }
    .result-shape {
      .shape-tag-wrapper {
        display: flex;
      }
      .shape-tag {
        width: 60px;
        height: 24px;
        border-radius: 12px;
        background: #65b0b4;
        color: #fff;
        font-size: 12px;
        line-height: 24px;
        margin-right: 12px;
        text-align: center;
        cursor: pointer;
      }
      .disactive {
        border: 1px solid #65b0b4;
        background: rgba(101, 176, 188, 0.15);
        color: #65b0b4;
      }
      .shape-description {
        margin-top: 10px;
      }
      .shape-img-container {
        margin-top: 10px;
        display: flex;
        .shape-img-single {
          padding: 13px;
          border-right: 1px dashed #e4e4e4;
          display: flex;
          flex-direction: column;
          align-items: center;
          .shape-img-single-img {
            width: 80px;
            height: 80px;
            margin: 4px 13px;
          }
          .shape-img-single-name {
            font-size: 14px;
          }
        }
      }
    }

    .result-moss {
      .moss-slider {
        display: flex;
      }
      .moss-slider-single {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .moss-slider-single-line {
          width: 100px;
          height: 6px;
          background: #f4f4f4;
          border-radius: 3px 3px 3px 3px;
          &.active {
            background: #ecbb5d;
          }
        }
        .moss-slider-single-text {
          margin-top: 4px;
          color: #999999;
          font-size: 12px;
        }
      }
      .moss-desc {
        margin-top: 10px;
      }
    }
    .result-color {
      .color-list {
        padding: 2px;
        background: #f0f0f0;
        border-radius: 3px 3px 3px 3px;
        display: flex;
        width: fit-content;
        .color-list-single {
          padding: 3px 14px;
          margin-right: 2px;
          height: 24px;
          font-size: 12px;
          color: #999999;
          // line-height: 24px;
          background: #fff;
          border-radius: 4px;
        }
        .active {
          background: #65b0b4;
          color: #fff;
        }
        .color-list-single:last-child {
          margin-right: 0px;
        }
      }
    }
    .desc {
      margin-top: 10px;
    }
    .desc-line {
      max-width: 1083px;
    }
  }
  .report-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    .report-footer-button {
      margin-right: 20px;
      width: 97px;
      // height: 32px;
      border-radius: 4px 4px 4px 4px;
    }
  }
</style>
